<html>
    
    <head>
        <meta charset=UTF-8>
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style>
            canvas {
                box-shadow: 0px 0px 8px 0px black;
            }
        </style>
        <script src="./../../src/tmlib.js" charset="UTF-8"></script>
        <script>
            
            TM.loadScript("graphics", "graphics");
            
            TM.main(function(){
                var c = TM.$id("c");
                var g = TM.Graphics.Graphics( c );
                
                if (TM.isMobile === true) {
                    // 画面いっぱいにする
                    g.fitWindowSize();
                }
                else {
                    // センタリング
                    TM.$centering(c);
                    // g.fitWindowSize();
                }
                // ラインスタイルをセット
                g.setLineStyle(8, "round", "round", 10);
                // g.setShadows("yellow", 0, 0, 5);
                
                var pointX = null, pointY = null;
                var onstart = function(e) {
                    // 位置をセット
                    pointX = e.pointX; pointY = e.pointY;
                    e.stop();
                };
                var onmove = function(e) {
                    // null の時は描画しない
                    if (pointX === null || pointY === null) return ;
                    
                    g.drawLine(pointX, pointY, e.pointX, e.pointY);
                    pointX = e.pointX; pointY = e.pointY;
                    e.stop();
                };
                var onend = function(e) {
                    // ボタンを押していない時は null をセット
                    pointX = pointY = null;
                    e.stop();
                };
                
                // マウス用イベント登録
                c.addEventListener("mousedown", onstart);
                c.addEventListener("mousemove", onmove);
                c.addEventListener("mouseup", onend);
                // タッチ用イベント登録
                c.addEventListener("touchstart", onstart);
                c.addEventListener("touchmove", onmove);
                c.addEventListener("touchend", onend);
                
                // ダブルクリックで保存
                c.addEventListener("dblclick", function() { g.saveAsImage(); });
                
                TM.inform();
            });
            
        </script>
    </head>
    
    <body>
        <canvas id="c" width="640" height="480"></canvas>
    </body>
    
</html>